<template>
  <div class="recharge">
    <van-nav-bar title="充值" left-arrow @click-left="onClickLeft" />
    <div class="bigbox">
      <div class="money-list">
        <div class="piece-1"><van-icon name="refund-o" />12.00</div>
        <div class="piece-1"><van-icon name="refund-o" />10.00</div>
        <div class="piece-1"><van-icon name="refund-o" />9.00</div>
        <div class="piece-1"><van-icon name="refund-o" />6.00</div>
        <div class="piece-1"><van-icon name="refund-o" />45.00</div>
        <div class="piece-1"><van-icon name="refund-o" />128.00</div>
        <div class="piece-1"><van-icon name="refund-o" />12.00</div>
        <div class="piece-1"><van-icon name="refund-o" />24.00</div>
      </div>
      <div class="top-up">充值</div>
    </div>
    <div class="explain">
      <h5>充值说明:</h5>
      <p>
        1.充值金额只能在网易云课堂iOS App内使用，不能用于安卓、网页等其他平台.
        <br />
        2.充值金额无使用期限，但充值成功后无法退款，不可提现. <br />
        3.使用苹果系统充值可参考 <i>充值流程说明 </i> <br />
        4.如遇到无法充值、充值失败等问题，可关注网易云课堂服务号，解决你的问题.
      </p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    this.$store.commit("tabHide");
  },
};
</script>

<style lang="scss">
.recharge {
  background-color: #f2f4f8;
  .van-nav-bar__title {
    font-weight: bold;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
  }
  .bigbox {
    width: 305px;
    height: 350px;
    // border: 1px solid black;
    position: relative;
    margin: 20px auto;

    .money-list {
      height: 260px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-content: space-between;
      justify-content: space-between;

      .piece-1 {
        width: 144px;
        height: 56px;
        color: rgba(80, 80, 80, 1);
        vertical-align: middle;
        font-size: 18px;
        background-color: white;
        .van-icon {
          font-size: 33px;
          line-height: 56px;
          vertical-align: middle;
          margin-left: 15px;
          color: rgba(80, 80, 80, 1);
        }
      }
    }
    .top-up {
      width: 100%;
      height: 37px;
      background-color: red;
      text-align: center;
      line-height: 37px;
      position: absolute;
      bottom: 0;
    }
  }
  .explain {
    width: 305px;
    height: 179px;
    // border: 1px solid black;
    margin: 35px auto;
    p {
      font-size: 13px;
      color: rgba(80, 80, 80, 1);
      line-height: 150%;
      margin-top: 10px;
      i{
        font-style: normal;
        color: rgba(51, 177, 123, 1);
        text-decoration: underline;
      }
    }
  }
}
</style>